<template>
  <div class="card p-8">
    <h3 class="text-lg font-semibold text-gray-900 mb-6 text-center">分析统计</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="text-center p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl">
        <div class="text-2xl font-bold text-blue-600 mb-1">{{ totalImages }}</div>
        <div class="text-sm text-gray-600">总图片数</div>
      </div>
      <div class="text-center p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-xl">
        <div class="text-2xl font-bold text-green-600 mb-1">{{ smoothCount }}</div>
        <div class="text-sm text-gray-600">畅通</div>
      </div>
      <div class="text-center p-4 bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-xl">
        <div class="text-2xl font-bold text-yellow-600 mb-1">{{ slowCount }}</div>
        <div class="text-sm text-gray-600">缓行</div>
      </div>
      <div class="text-center p-4 bg-gradient-to-r from-red-50 to-red-100 rounded-xl">
        <div class="text-2xl font-bold text-red-600 mb-1">{{ congestedCount }}</div>
        <div class="text-sm text-gray-600">拥堵</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  analysisResults: {
    type: Array,
    default: () => []
  }
})

const getStatusCount = (status) => {
  return props.analysisResults.filter(result => result.status === status).length
}

const totalImages = computed(() => {
  return props.analysisResults.length
})

const smoothCount = computed(() => {
  return getStatusCount('smooth')
})

const slowCount = computed(() => {
  return getStatusCount('slow')
})

const congestedCount = computed(() => {
  return getStatusCount('congested')
})
</script>
